<template>
  <div class="login-container">
    <div class="login">
      <div class="nav">
        <div class="login-title">
          <el-image class="logo" src="https://blb-manage.oss-cn-wuhan-lr.aliyuncs.com/f1c9d90e-837c-488d-8d21-17e948a7914c.svg"></el-image>
          <!--          <span class="title">账号登陆</span>-->
        </div>
        <div class="login-form">
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              status-icon
              :rules="rules"
          >
            <div class="login-form-item">
              <el-form-item label="学号" prop="studentId">
                <el-input prefix-icon="User" v-model="ruleForm.studentId" type="text" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="密码" prop="voucher">
                <el-input
                    prefix-icon="Unlock"
                    @keyup.enter="submitForm(ruleFormRef)"
                    v-model="ruleForm.voucher"
                    type="password"
                    autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <div class="all-btn">
                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                  <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div class="footer">
        <div class="footer-login">
          <div class="text" >其他登陆方式</div>
          <a class="login-link" @click="dialogVisible=true"><el-image style="margin-right: 10px;" src="https://blb-manage.oss-cn-wuhan-lr.aliyuncs.com/a0aca11b-9a3d-4b8a-a170-15e3a7608b2c.png"></el-image></a>
          <a class="login-link"><el-image src="https://blb-manage.oss-cn-wuhan-lr.aliyuncs.com/d062ec9d-d281-4ff5-a25e-2f2aae219bba.png" @click="LoginOfPhone()"></el-image></a>
        </div>
      </div>
      <div class="footer-text" >武汉厚溥数字科技有限公司</div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        style="min-width: 330px"
        width="330px"
        center
    >
      <wxlogin :appid="appid" :scope="scope" :redirect_uri="redirect_uri"></wxlogin>
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElDialog, FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from '../router/index'
import axiosInstance from '../axios/index'
import {useStudentStore} from "../stores/student.js";

const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref(false);
const appid = "wxd99431bbff8305a0";
const scope = "snsapi_login";
const redirect_uri = "http://www.pinzhi365.com/wxlogin";

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the voucher'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  studentId: '202400025',
  voucher: '123456',
})

//规则
const rules = reactive<FormRules<typeof ruleForm>>({
  studentId: [{trigger: 'blur'}],
  voucher: [{validator: validatePass2, trigger: 'blur'}],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      axiosInstance.post("/student/login", {
        studentId: ruleForm.studentId,
        voucher: ruleForm.voucher,
      },{}).then(res => {
        localStorage.setItem("frontToken", res.data.data);
        useStudentStore().getStudentInfo(ruleForm.studentId)
        ElMessage({
          message: '登录成功',
          type: 'success',
          duration: 500,
          onClose: function () {
            router.push("/index")
          }
        })
      })
    }else {
      ElMessage({
        message:'登陆失败',
        type:'error'
      })
    }
  })
}

const resetForm = () => {
  ruleForm.studentId = ''
  ruleForm.voucher = ''
}

//手机登录页面跳转
function LoginOfPhone() {
  router.push('/loginOfPhone')
}

onMounted(()=>{
  localStorage.clear()
})





</script>

<style scoped>
.login-container{
  //background: url("../image/login.jpg") no-repeat left;
  width: 100vw;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100vh;
  //background: linear-gradient(125deg, #d5dee7, #ffafbd, #ffc3a0, #d9afd9, #97d9e1);
  background: linear-gradient(158deg,#E0C3FC 30%,#8EC5FC 70%);
  background-size: contain;
}

/*登陆主体部分*/
.login-container .login {
  width: 400px;
  height: 500px;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(23px);
  margin-left: 40px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.login-container .login .nav{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.login-container .login-title {
  text-align: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 285px;
}
/*.login-title .title{
  color: #333;
  font-weight: 10;
  font-family:Simsun;
}*/

.login-container .login-title .logo{
  width: 200px;
}

/*form表单整体*/
.login-container .login-form{
  width: 400px;
  display: flex;
  justify-content: center;
  margin-top: 85px;
  margin-bottom: 60px;
}
/*form-item部分*/
.login-form-item .el-form-item{
  width: 250px;
  padding-bottom: 10px;
}
/*按钮*/
.all-btn {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: var(--font-size);
  line-height: 32px;
  min-width: 0;
  position: relative;
  justify-content: center;
  text-align: center;
}

.all-btn .el-button{
  width: 70px;
}

.login-form-item .el-form-item .el-form-item__content .all-btn .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  transition: all 0.3s ease;
}

.login-form-item .el-form-item .el-form-item__content .all-btn .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.login-form-item .el-form-item .el-form-item__content .all-btn .el-button+.el-button {
  margin-left: 30px;
}

/* 自定义错误提示样式 */
.login-form-item .el-form-item__error {
  font-size: 12px;
  color: #f56c6c;
}

/* 鼠标悬停时按钮的阴影 */
.all-btn .el-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*底部*/
.footer {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
}

.footer-login {
  text-align: center; /* 文本居中 */
}

.text {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.text::before{
  margin-right: 9px;
}
.text::after{
  margin-left: 9px;
}
.text::before, .text::after{
  display: block;
  content: "";
  width: 80px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.26);
}
.login-link {
  color: #007bff;
}
.footer .footer-login .el-image{
  width: 30px;
  height: 30px;
}

a:hover {
  cursor: pointer;
}

.footer-text{
  font-size: 15px;
  color: #333;
  font-weight: 10;
  font-family:Simsun;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}
</style>

